import React, { Component } from 'react';
import { Text, Image, View, TextInput, TouchableOpacity } from 'react-native';
import { unitWidth } from '../constants/AdapterUtil';
import { MyHeader } from '../components/MyHeader';
import { styleS } from '../constants/Styles';
import Colors from '../constants/Colors';
import { postQueryFetch, postFetch } from '../constants/HttpExtension';
import Permissions from 'react-native-permissions';
import SyanImagePicker from 'react-native-syan-image-picker';
import { uploadImage, uploadFile } from '../constants/UpLoadHelper';
import { show } from '../constants/Toast';
import { api_member_info_updateUserInfo } from '../constants/HttpServices';
import { SubmitButton1 } from '../components/Button';

const options = {
    imageCount: 1,
    isCamera: true,
    minimumCompressSize: 100,
    quality: 50
}

export default class MineInfoScreen extends Component {

    constructor(props) {
        super(props)

        const { navigation } = this.props;
        this.state = {
            userInfo: global.userInfo,
            ImageList: [],
            avatar: '',
            nickname: global.userInfo.nickname,
        }
    }

    componentWillMount() {

    }

    componentWillUnmount() {

    };

    render() {
        return (
            <View style={{ flex: 1, backgroundColor: Colors.colorEF }}>
                <MyHeader title='个人资料' leftImg={require('../res/ic_arrow_left.png')} leftClick={() => { this.props.navigation.pop() }} />
                <TouchableOpacity style={{ alignSelf: 'stretch' }} onPress={() => { this.requestCameraPermission() }}>
                    <View style={{
                        height: 80 * unitWidth,
                        alignSelf: 'stretch',
                        marginTop: 5 * unitWidth,
                        flexDirection: 'row',
                        alignItems: 'center',
                        backgroundColor: Colors.white
                    }}>
                        <Text style={{ marginLeft: 15 * unitWidth }}>头像：</Text>
                        <Image style={{ width: 50 * unitWidth, height: 50 * unitWidth, borderRadius: 25 * unitWidth, position: 'absolute', right: 30 * unitWidth }} source={{ uri: this.state.avatar == '' ? this.state.userInfo.avatar : this.state.avatar }} resizeMode='cover' />
                    </View>
                </TouchableOpacity>
                <View style={{ alignSelf: 'stretch' }} onPress={() => { this.props.navigation.navigate('ChangeName') }}>
                    <View style={{
                        height: 40 * unitWidth,
                        alignSelf: 'stretch',
                        marginTop: 5 * unitWidth,
                        flexDirection: 'row',
                        alignItems: 'center',
                        backgroundColor: Colors.white
                    }}>
                        <Text style={{ marginLeft: 15 * unitWidth }}>昵称：</Text>
                        <TextInput
                            style={{
                                flex: 3, textAlign: 'right', marginRight: 15 * unitWidth
                            }}
                            onChangeText={(text) => {
                                this.setState({
                                    nickname: text
                                })
                            }}
                            maxLength={8}
                            placeholder='请输入昵称'
                            value={this.state.nickname}
                        />
                    </View>
                </View>
                <SubmitButton1 style={{ marginTop: 294 * unitWidth, alignSelf: 'center' }} text='确定' onPress={() => {
                    this.changeInfo(this.state.avatar);
                }} />
            </View>
        );
    }

    //列表项的点击事件
    onItemClick(index) {

    }

    requestCameraPermission() {
        try {
            Permissions.request('camera', {
                type: 'always',
            }).then(response => {
                console.log(response)
                if (response === 'authorized') {
                    this.doChoose();
                }
            }).catch(err => {
                console.log(err)
            })
        } catch (err) {
            console.log(err);
        }
    }

    doChoose() {
        // width	int	图片宽度
        // height	int	图片高度
        // uri	string	图片路径
        // original_uri	string	图片原始路径，仅 Android
        // type	string	文件类型，仅 Android，当前只返回 image
        // size	int	图片大小，单位为字节 b
        // base64	string	图片的 base64 编码，如果 enableBase64 设置 false，则不返回该属性
        SyanImagePicker.showImagePicker(options, (err, selectedPhotos) => {
            if (err) {
                // 取消选择
                return;
            }
            // 选择成功，渲染图片
            console.log(selectedPhotos[0].uri)
            this.state.ImageList = selectedPhotos;
            this.setState({
                ImageList: selectedPhotos
            })
            uploadFile(this.state.ImageList, () => {

            }, {
                success: (response) => {
                    this.setState({
                        avatar: response.files[0].url
                    })
                },
                fail: (response) => {
                    show('上传失败')
                }
            })
        })
    }

    //修改头像
    changeInfo(url) {
        let params = {
            'nickname': this.state.nickname,
            'avatar': url,
        }
        postFetch(api_member_info_updateUserInfo, params, {
            success: (response) => {
                show(response.result.message);
                this.setState({
                    avatar: url
                })
                global.userInfo.avatar = url;
                this.props.navigation.pop();
            },
            fail: (response) => {
                show(response.result.message);
            }
        })
    }
}